import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Card,
  Form,
  Table,
  Tag,
  Row,
  Col,
  Select,
  Button,
  Input,
  DatePicker,
  Modal,
  InputNumber,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import moment from 'moment';
import { Link, routerRedux } from 'dva/router';
// import store from '../../index';
@connect(({ classInfo3, administration3, loading }) => ({
  classInfo:classInfo3,
  administration:administration3,
}))
class ClassInfoManager extends PureComponent {
  state = {
    selectedRowKeys: [],
    selectedRows: [],
    pageNo: 1,
    classInfoList: {},
    campusList: [],
    classLevelList: [],
    teacherName: '',
    campus: 0,
    classLevel: 0,
    status: 0,
    type: 0,
    classTypeList: [],
  };
  constructor(props) {
    super(props);
    this.pageSearch = this.pageSearch.bind(this);
  }
  componentDidMount() {
    this.initLoad();
    this.props
      .dispatch({
        type: 'classInfo3/getClassTypeList',
      })
      .then(() => {
        this.setState({
          classTypeList: this.props.classInfo.classTypeList,
        });
      });
  }
  initLoad = () => {
    const { dispatch } = this.props;
    var params = { pageNo: 1 };
    this.loadData(params);
    dispatch({
      type: 'administration3/getCampusList',
    }).then(() => {
      this.setState({
        campusList: this.props.administration.campusList,
      });
    });
    dispatch({
      type: 'classInfo3/getClassLevel',
    }).then(() => {
      this.setState({
        classLevelList: this.props.administration.classLevelList,
      });
    });
  };

  pageSearch = params => {
    const { campus, classLevel, status, type } = this.state;

    params.campus = campus;
    params.classLevel = classLevel;
    params.type = type;
    params.status = status;
    if (campus == 0) {
      params.campus = null;
    }
    if (classLevel == 0) {
      params.classLevel = null;
    }
    if (type == 0) {
      params.type = null;
    }
    if (status == 0) {
      params.status = null;
    }
    this.loadData(params);
  };
  loadData = params => {
    const { dispatch } = this.props;
    dispatch({
      type: 'classInfo3/getClassInfoPage',
      payload: params,
    }).then(() => {
      this.setState({
        classInfoList: this.props.classInfo,
      });
    });
  };

  statusSelect = e => {
    this.setState({
      type: e,
    });
  };

  getColumns = () => {
    return [
      {
        title: '班级名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
      },
      {
        title: '班级',
        dataIndex: 'classTypeName',
        key: 'classTypeName',
        align: 'center',
      },
      {
        title: '年级',
        dataIndex: 'classLevelName',
        key: 'classLevelName',
        align: 'center',
      },
      {
        title: '科目',
        dataIndex: 'subjectName',
        key: 'subjectName',
        align: 'center',
      },
      {
        title: '老师',
        dataIndex: 'teacherName',
        key: 'teacherName',
        align: 'center',
      },
      {
        title: '所在校区',
        dataIndex: 'campusName',
        key: 'campusName',
        align: 'center',
      },
      {
        title: '课时',
        dataIndex: 'totalClassTime',
        key: 'totalClassTime',
        align: 'center',
      },
      {
        title: '班级人数',
        dataIndex: 'studentCount',
        key: 'studentCount',
        align: 'center',
      },
      {
        title: '授课时间',
        dataIndex: 'startDate',
        key: 'startDate',
        align: 'center',
        render: (item, record) => {
          return (
            moment(record.startDate).format('YYYY-MM-DD') +
            '-' +
            moment(record.endDate).format('YYYY-MM-DD')
          );
        },
      },
      {
        title: '状态',
        dataIndex: 'statusLabel',
        key: 'statusLabel',
        align: 'center',
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        render: record => {
          return (
            <span>
              <Link
                to={`/administration/teacherCalendar?teacherId=${
                  record.teacherId
                }&startDate=${moment(record.startDate).format()}&teacherName=${
                  record.teacherName
                }&campusId=${record.campusId}&endDate=${moment(record.endDate).format()}&type=${
                  record.type
                }`}
              >
                课表
              </Link>
              &nbsp;&nbsp;
              <Link to={`/administration/classInfoEdit?classId=${record.id}`}>编辑</Link>
            </span>
          );
        },
      },
    ];
  };

  rowSelection = () => {
    return {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({ selectedRowKeys, selectedRows });
      },
    };
  };

  onRow = record => {
    return {
      onClick: () => {
        let { selectedRowKeys, selectedRows } = this.state;

        if (selectedRowKeys.indexOf(record.key) > -1) {
          selectedRowKeys = selectedRowKeys.filter(s => s !== record.key);
          selectedRows = selectedRows.filter(s => s.key !== record.key);
        } else {
          selectedRowKeys.push(record.key);
          selectedRows.push(record);
        }
        this.setState({
          selectedRowKeys: [...selectedRowKeys],
          selectedRows: [...selectedRows],
        });
      },
    };
  };

  checkOk = () => {
    this.setState({ checkVisible: false });
  };

  checkCancel = () => {
    this.setState({ checkVisible: false });
  };

  checkModalShow = record => {
    this.setState({
      currentCheckSize: 50,
      checkVisible: true,
    });
  };

  checkSizeChange = e => {
    this.setState({ currentCheckSize: e });
  };
  tablePageChange = pageNo => {
    this.setState({
      pageNo: pageNo,
    });
    var param = {};
    param.pageNo = pageNo;
    this.pageSearch(param);
  };
  handleCategory = (type, value) => {
    var param = {};
    param.pageNo = 1;
    switch (type) {
      case 1:
        this.setState(
          {
            campus: value,
          },
          () => {
            this.pageSearch(param);
          }
        );
        break;
      case 2:
        this.setState(
          {
            classLevel: value,
          },
          () => {
            this.pageSearch(param);
          }
        );
        break;
      case 3:
        this.setState(
          {
            type: value,
          },
          () => {
            this.pageSearch(param);
          }
        );
        break;
      case 4:
        this.setState(
          {
            status: value,
          },
          () => {
            this.pageSearch(param);
          }
        );
        break;
      default:
        break;
    }
  };
  createDateChange = (date, dateString) => {
    this.setState({
      createDateFrom: dateString[0],
      createDateTo: dateString[1],
    });
  };
  showNewClass = () => {
    // const { dispatch } = store;
    this.dispatch(routerRedux.push('/administration/classInfoAdd'));
  };
  render() {
    const { campusList = [] } = this.props.administration;
    const { classInfoList, classLevelList } = this.props.classInfo;
    const { CheckableTag } = Tag;
    const { campus, classLevel, status, type } = this.state;
    return (
      <PageHeaderLayout>
        <Card>
          <div>
            <Row>
              校区:{' '}
              <CheckableTag
                span={3}
                checked={campus == 0}
                onChange={() => {
                  this.handleCategory(1, 0);
                }}
              >
                全部
              </CheckableTag>{' '}
              {campusList.map((item, i) => (
                <CheckableTag
                  span={3}
                  key={i}
                  checked={campus == item.id}
                  onChange={() => {
                    this.handleCategory(1, item.id);
                  }}
                >
                  {item.name}
                </CheckableTag>
              ))}
            </Row>
          </div>
          <div>
            <Row>
              年级:{' '}
              <CheckableTag
                span={3}
                checked={classLevel == 0}
                onChange={() => {
                  this.handleCategory(2, 0);
                }}
              >
                全部
              </CheckableTag>{' '}
              {classLevelList.map((item, i) => (
                <CheckableTag
                  span={3}
                  checked={classLevel == item.code}
                  onChange={() => {
                    this.handleCategory(2, item.code);
                  }}
                  key={i}
                >
                  {item.msg}
                </CheckableTag>
              ))}
            </Row>
          </div>
          <div>
            <Row>
              班级:
              <CheckableTag
                span={3}
                checked={type == 0}
                onChange={() => {
                  this.handleCategory(3, 0);
                }}
              >
                全部
              </CheckableTag>
              {this.state.classTypeList.map(t => (
                <CheckableTag
                  key={t.id}
                  span={3}
                  checked={type == t.id}
                  onChange={() => {
                    this.handleCategory(3, t.id);
                  }}
                >
                  {t.name}
                </CheckableTag>
              ))}
            </Row>
          </div>
          <div>
            <Row>
              状态:{' '}
              <CheckableTag
                span={3}
                checked={status == 0}
                onChange={() => {
                  this.handleCategory(4, 0);
                }}
              >
                全部
              </CheckableTag>
              <CheckableTag
                span={3}
                checked={status == 3}
                onChange={() => {
                  this.handleCategory(4, 3);
                }}
              >
                授课中
              </CheckableTag>
              <CheckableTag
                span={3}
                checked={status == 4}
                onChange={() => {
                  this.handleCategory(4, 4);
                }}
              >
                已结课
              </CheckableTag>
            </Row>
          </div>
        </Card>
        <Row>
          <Col span={8}>
            <Button onClick={this.showNewClass} type="primary">
              新建班级
            </Button>
          </Col>
        </Row>
        <Card bordered={false}>
          <Table
            dataSource={classInfoList.list}
            columns={this.getColumns()}
            pagination={{
              onChange: this.tablePageChange,
              current: this.state.pageNo,
              size: 10,
              total: classInfoList.total,
              showTotal() {
                return (
                  <span>
                    共 <a style={{ color: '#1893ab' }}>{classInfoList.total}</a> 道
                  </span>
                );
              },
            }}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}

export default ClassInfoManager;
